<template>
	<view class="wk-index">
		<!-- #ifndef MP-TOUTIAO -->
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="u-flex-1 px-32 row">
				<!-- <image src="@/static/images/logo.png" class="img-logo" mode=""></image> -->
				<image src="@/hl/logo/logo.png" class="img-logo" mode=""></image>
				<view class="search-heard u-flex-1 u-bdr-34 u-p-l-24 row" @click="$navTo('/pages/index/search/index')">
					<u-icon name="search" color="#999A9C" size="28"></u-icon>
					<view class="u-f-26 w-s-color-9 u-m-l-4">今日正在热播</view>
				</view>
			</view>
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="dy-heard row">
			<image src="@/static/images/logo.jpg" class="img-logo" mode=""></image>
			<view class="search-heard u-flex-1 u-bdr-34 u-p-l-24 row" @click="$navTo('/pages/index/search/index')">
				<u-icon name="search" color="#999A9C" size="28"></u-icon>
				<view class="u-f-26 w-s-color-9 u-m-l-4">今日正在热播</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="px-32 w-100">
			<!-- 轮播图 -->
			<u-swiper :list="swiperList" height="384" @click="swiperClick"></u-swiper>
			<!-- 公告 -->
			<view class="gg flex align-center justify-center" v-if="noticeList.length>0">
				<view class="gg-box flex align-center justify-between">
					<image src="../../static/images/index/ggIcon.png" mode=""></image>
					<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
						class="gg-box-swiper">
						<block v-for="(item, index) in noticeList">
							<swiper-item @tap='goMsg(item.url)'>
								<view class="gg-box-swiper-t">{{item.title}}</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<!-- 分类区 -->
			<view class="u-p-t-26 u-p-b-28 w-100">
				<scroll-view scroll-x="true" class="cate-scroll w-100">
					<view class="w-100 row">
						<view class="cate-item  direction" v-for="item in gridList" :key="item.id"
							@click="$navTo(item.url)">
							<u-image width="84rpx" height="84rpx" :src="item.imageUrl"></u-image>
							<view class="u-m-t-10 u-f-28">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 榜单 -->
			<view class="leader-view position-relative w-100 w-s-color-f u-bdr-12 ">
				<view class="u-p-l-28 position-absolute top-0 left-0 w-100 h-100" style="z-index: 3;">
					<view class="leader-heard row u-f-32">
						<view @click="hotTab=3" class="tab-item h-100 "
							:class="hotTab==3 ? 'font-weight-550 u-f-40' : ''">热播榜</view>
						<view @click="hotTab=1" class="tab-item h-100"
							:class="hotTab==1 ? 'font-weight-550 u-f-40' : ''">热搜榜</view>
					</view>
					<scroll-view scroll-x="true" class="hot-scroll w-100">
						<view class="row w-100">
							<view class="u-m-r-8" v-for="item in hotVideoList" :key="item.courseId"
								@click="seVideo(item)">
								<view class="position-relative">
									<u-image width="214rpx" border-radius="8" height="278rpx"
										:src="item.titleImg"></u-image>
									<view class="position-absolute w-100 h-100 top-0 left-0 column justify-between">
										<view class="hot-tag u-f-22 text-center">{{hotTab==3 ? '热播' : '热搜'}}</view>
										<view class="row row-end">
											<view class="num-view u-f-22">
												{{item.courseDetailsCount?item.courseDetailsCount:0}}集全
											</view>
										</view>
									</view>
								</view>
								<view class="u-m-t-12 u-f-28 u-p-l-10">{{item.title}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 会员专区 -->
			<!-- #ifdef MP -->
			<block v-if="rmVideList.length>0">
				<prefecture-view title="会员专区" sort="0" :list='rmVideList'></prefecture-view>
			</block>
			<!-- #endif -->
			<!-- 男生都爱看 -->
			<block v-if="phbVideoList.length>0">
				<prefecture-view title="男生都爱看" sort="1" :list='phbVideoList'></prefecture-view>
			</block>
			<!-- 女生都爱看 -->
			<block v-if="newVideList.length>0">
				<prefecture-view title="女生都爱看" sort="2" :list='newVideList'></prefecture-view>
			</block>
			<!-- #ifdef MP -->
			<block v-if="jdVideoList.length>0">
				<prefecture-view title="金豆专区" sort="3" :list='jdVideoList'></prefecture-view>
			</block>
			<!-- #endif -->
			<!-- 金豆专区 -->

		</view>
		<!-- 抖音im客服 -->
		<ttMsg />
	</view>
</template>

<script>
	/* 专区组件 */
	import prefectureView from "./prefectureView.vue"
	import ttMsg from '@/components/ttMsg/ttMsg.vue'
	export default {
		components: {
			prefectureView,
			ttMsg
		},
		data() {
			return {
				swiperList: [],
				/* 轮播图 */
				gridList: [], //获取金刚区类表
				hotTab: 3,
				rmVideList: [], //会员专区
				phbVideoList: [], //男生爱看
				newVideList: [], //女生爱看
				jdVideoList: [], //金豆专区
				hotVideoList: [],
				noticeList: [] //公告列表
			};
		},
		onShareAppMessage(res) {},
		onShareTimeline(res) {},
		onShow(options) {
			this.getInit()
		},
		watch: {
			hotTab(val) {
				this.getHotVideo(val)
			}
		},
		methods: {
			/* 查看视频 */
			seVideo(item) {
				this.$navTo(
					`/me/detail/detail?id=${item.courseId}&courseDetailsId=${item.courseDetailsId}&tt_album_id=${item.dyCourseId}&tt_episode_id=${item.dyEpisodeId}`
				)
			},
			getInit() {
				this.getBannerList()
				this.getMsg()
				this.getGardList()
				/* 热播 */
				this.getHotVideo(3)

				/* 男生爱看 */
				this.getrecomVideo(1)
				/* 女生爱看 */
				this.getrecomVideo(2)
				// #ifdef MP
				/* 会员专区 */
				this.getrecomVideo(0)
				/* 金豆专区 */
				this.getrecomVideo(3)
				// #endif
			},
			// 获取金刚区列表
			getGardList() {
				this.$u.api.bannerList({
					classify: '2',
				}).then(res => {
					if (res.code == 0) {
						this.gridList = res.data
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			//轮播图跳转
			swiperClick(e) {
				let token = uni.getStorageSync('token')
				let url = this.swiperList[e].url
				if (token) {
					if (url) {
						if (url.indexOf('/pages/') !== -1 || url.indexOf('/me/') !== -1) {
							uni.navigateTo({
								url
							});
						} else {
							//#ifndef H5
							this.$navTo(`/pages/index/webView?url=${url}`)
							//#endif
							//#ifdef H5
							window.location.href = url;
							//#endif	
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 公告
			getMsg() {
				let data = {
					page: 1,
					limit: 100,
					state: 1
				}
				this.$u.api.msg(data).then(res => {
					if (res.code == 0) {
						this.notice = res.data.list
						res.data.list.forEach(res => {
							this.noticeList.push(res)
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			// 获取轮播图列表
			getBannerList() {
				this.swiperList = []
				this.$u.api.bannerList({
					classify: '1'
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(d => {
							if (d.state == 1) {
								this.swiperList.push(d)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				})
			},
			//获取推荐视频
			getrecomVideo(sort) {
				let data = {
					page: 1,
					limit: 6,
					classifyId: ''
				}
				if (sort == 0 || sort == 3) {
					data.chargeType = sort == 0 ? 0 : 1
				}
				if (sort == 1 || sort == 2) {
					data.genderType = sort == 1 ? 0 : 1
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$Request.getT('/app/course/selectCourse', data).then(res => {
					if (res.code == 0) {
						if (Number(sort) == 0) { //会员专区
							this.rmVideList = res.data.list
						} else if (Number(sort) == 1) { //男生爱看
							this.phbVideoList = res.data.list
						} else if (Number(sort) == 2) { //女生爱看
							this.newVideList = res.data.list
						} else {
							/* 金豆专区 */
							this.jdVideoList = res.data.list
						}
					}
				})
			},
			//获取热播热搜
			getHotVideo(sort) {
				let data = {
					page: 1,
					limit: 6,
					sort,
				}
				// #ifdef MP-WEIXIN
				data.wxShow = 1
				// #endif
				// #ifdef MP-TOUTIAO
				data.dyShow = 1
				// #endif
				this.$Request.getT('/app/course/selectCourse', data).then(res => {
					if (res.code == 0) {
						this.hotVideoList = res.data.list
					}
				})
			},
		},
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss">
	.gg {
		width: 100%;
		height: auto;
		margin-top: 20rpx;

		.gg-box {
			width: 686rpx;
			height: 62rpx;
			background-color: #FFF2F4;
			border-radius: 32rpx;
			padding: 0 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.gg-box-swiper {
			width: calc(100% - 56rpx);
			height: 100%;
		}

		.gg-box-swiper-t {
			width: 100%;
			height: 100%;
			color: #FD4F65;
			line-height: 62rpx;
			font-size: 26rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.wk-index {
		width: 100vw;
		min-height: 100vh;

		.dy-heard {
			position: sticky;
			top: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			padding: 24rpx 32rpx;
			z-index: 2000;
		}

		.img-logo {
			width: 50rpx;
			height: 50rpx;
			margin-right: 16rpx;
		}

		.search-heard {
			height: 64rpx;
			background: #F9FAFC;
		}

		.cate-scroll {
			white-space: nowrap;

			.cate-item {
				width: 25%;
			}
		}

		.leader-view {
			height: 446rpx;
			/* #ifndef MP */
			background-image: url('@/static/images/index/2.png');
			/* #endif */
			/* #ifdef MP */
			background-image: url('http://duanjusaas.zyrkeji.cn/sqx_fast/file/uploadPath/2024/08/16/8a2009e029064a3de1eff1a264183104.png');
			/* #endif */
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.leader-heard {
				height: 98rpx;

				.tab-item {
					width: 28%;
					line-height: 98rpx;
					transition: all .1s;
				}
			}

			.hot-scroll {
				white-space: nowrap;

				.hot-tag {
					width: 72rpx;
					height: 32rpx;
					background: #F1651A;
					border-radius: 6rpx 0rpx 18rpx 0rpx;
					line-height: 32rpx;
				}

				.num-view {
					height: 32rpx;
					background: rgba(51, 51, 51, 0.34);
					border-radius: 6rpx 0rpx 6rpx 0rpx;
					line-height: 32rpx;
					padding: 0 16rpx;
				}
			}
		}
	}
</style>